<template>
  <view class="c-image" @click="$emit('click')">
    <u-image
      v-if="url"
      :border-radius="borderRadius"
      :fade="false"
      :lazy-load="true"
      :mode="mode"
      :show-error="showError"
      :show-loading="showLoading"
      :src="url "
      bg-color="transparent"
      height="100%"
      width="100%"
      :class="[className]"
    >
      <u-loading slot="loading" />
      <template slot="error">
        <u-image
          :border-radius="borderRadius"
          :fade="false"
          :height="errorUrlSize"
          :mode="mode"
          :src="errorUrl"
          :width="errorUrlSize"
          bg-color="transparent"
        />
      </template>
    </u-image>
    <view
      v-else-if="showError"
      class="no-image">
      <u-image
        :border-radius="borderRadius"
        :fade="false"
        :height="errorUrlSize"
        :mode="mode"
        :src="errorUrl"
        :width="errorUrlSize"
        bg-color="transparent"
      />
    </view>
  </view>
</template>

<script>
import config from '@/common/config.js';
export default {
  name: 'CImage',
  props: {
    src: {
      type: String,
      default: '',
    },
    mode: {
      type: String,
      default: 'aspectFill',
    },
    showLoading: {
      type: Boolean,
      default: false,
    },
    showError: {
      type: Boolean,
      default: true,
    },
    resize: {
      type: String,
      default: '',
    },
    borderRadius: {
      type: String,
      default: '',
    },
    isServer: {
      type: Boolean,
      default: false,
    },
    errorImageUrl: {
      type: String,
      default: '',
    },
    className: {
      type: String,
      default: 'w100 h100 disb bgtr',
    },
  },
  data() {
    return {
      // placeholderSize: 0
      width: 0,
      height: 0,
      imagePrefix: config.imagePrefix,
    };
  },
  computed: {
    url() {
      if (this.isServer) {
        let pre = this.imagePrefix;
        return pre + this.src;
      }
      return this.src;
    },
    errorUrl() {
      return (
        this.errorImageUrl ||
        `${this.imagePrefix}logo.png?x-oss-process=image/resize,m_fixed,w_300`
      );
    },
    errorUrlSize() {
      // if (this.errorImageUrl) return '100%'

      const { width } = this;
      const { height } = this;

      const shortSide = width >= height ? height : width;

      if (shortSide == 0) return 0;

      let coefficient = width >= height ? width / height : height / width;
      // 默认占据全部内容比例
      // coefficient *= 0.8;
      coefficient *= 1;
      coefficient = coefficient > 1 ? 1 : coefficient;
      return `${shortSide * coefficient}px`;
    },
  },
  mounted() {
    const that = this;
    that.sleep(0).then(() => {
      const query = uni.createSelectorQuery().in(that);
      query.select('.c-image').boundingClientRect();
      query.exec((res) => {
        const { width = 0, height = 0 } = res[0] || {};
        that.width = width;
        that.height = height;
      });
    });
  },
  created() {
    // 兼容小程序写法
    this.imagePrefix = this.$imagePrefix;
  },
};
</script>

<style lang="less" scoped>
.c-image {
  height: 100%;
  width: 100%;
  display: block;
}

.no-image {
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  //background: #808080;
  background: #f3f4f6;
}
</style>
